function getLine1(id, data) {
  var chartDom = document.getElementById(id);
  var myChart = echarts.init(chartDom, null, {
    devicePixelRatio: 2,
  });
  var option;
  var color = ["#FF6C6C", "#2AAE2F", "#FE8B0D", "#0C52FF"];

  option = {
    color: color,
    tooltip: {
      trigger: "axis",
      textStyle: {
        fontSize: 20,
      },
    },
    legend: {
      show: true,
      top: 10,
      textStyle: { fontSize: 14 },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      top: "15%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLine: {
          show: true,
          lineStyle: {
            color: "#D7DBEE",
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: "#333333",
            fontSize: 14,
          },
        },
        axisLine: {
          show: false,
        },
        data: ["13:00", "13:05", "13:10", "13:15", "13:20", "13:25"],
      },
    ],
    yAxis: [
      {
        type: "value",
        // name: "单位：MW",
        // nameTextStyle: {
        //   color: "#333333",
        //   fontSize: 14,
        // },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#D7DBEE",
          },
        },
        axisLabel: {
          textStyle: {
            color: "#333333",
            fontSize: 14,
          },
        },
        splitLine: {
          lineStyle: {
            color: "rgba(215, 219, 238, 0.6)",
          },
        },
      },
    ],
    series: [
      {
        name: "数据1",
        type: "line",
        stack: "新能源",
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(255, 108, 108,0.8)",
            },
            {
              offset: 1,
              color: "rgba(255, 108, 108,0.4)",
            },
          ]),
        },
        smooth: true,
        lineStyle: {
          normal: {
            width: 2,
          },
        },
        showSymbol: false,
        data: [16, 15, 13, 17, 19, 26],
      },
      {
        name: "数据2",
        type: "line",
        stack: "新能源",
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(51, 177, 56,0.8)",
            },
            {
              offset: 1,
              color: "rgba(51, 177, 56,0.4)",
            },
          ]),
        },
        smooth: true,
        lineStyle: {
          normal: {
            width: 2,
          },
        },
        showSymbol: false,
        data: [13, 10, 15, 15, 20, 11],
      },
      {
        name: "数据3",
        type: "line",
        stack: "新能源",
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(254, 139, 13,0.8)",
            },
            {
              offset: 1,
              color: "rgba(254, 139, 13,0.4)",
            },
          ]),
        },
        smooth: true,
        lineStyle: {
          normal: {
            width: 2,
          },
        },
        showSymbol: false,
        data: [13, 10, 15, 15, 20, 11],
      },
      {
        name: "数据4",
        type: "line",
        stack: "新能源",
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(12, 82, 255,0.8)",
            },
            {
              offset: 1,
              color: "rgba(12, 82, 255,0.4)",
            },
          ]),
        },
        smooth: true,
        lineStyle: {
          normal: {
            width: 2,
          },
        },
        showSymbol: false,
        data: [13, 10, 15, 15, 20, 11],
      },
    ],
  };

  option && myChart.setOption(option);
  // myChart.resize()
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
function viewCharts1(id, datanew, barW) {
  const chart = document.getElementById(id)
  chart.removeAttribute('_echarts_instance_')//解决切换页面echarts不显示的问题
  var serveTBar = echarts.init(chart);
  let data = [
    { name: '考核量1', data_a: datanew.data1 },
    { name: '考核量2', data_a: datanew.data2 },
    { name: '考核量3', data_a: datanew.data3 },
    { name: '免考量1', data_a: datanew.data4 },
    { name: '免考量2', data_a: datanew.data5 },
    { name: '免考量3', data_a: datanew.data6 },
    // {name:'数据4',data_a:datanew.data4},
  ]
  const data0 = data[0].data_a;
  const data1 = data[1].data_a;
  const data2 = data[2].data_a;

  const data3 = data[3].data_a;
  const data4 = data[4].data_a;
  const data5 = data[5].data_a;
  // const data3 = data[3].data_a;

  const sideData = data0.map(item => item);
  const sideData1 = data1.map((item, index) => item + data0[index]);
  const sideData2 = data2.map((item, index) => item + data0[index] + data1[index]);
  
  const sideData3 = data3.map(item => item);
  const sideData4 = data4.map((item, index) => item + data3[index]);
  const sideData5 = data5.map((item, index) => item + data3[index] + data4[index]);
  // const sideData3 = data3.map((item, index) => item + data0[index] + data1[index]+ data2[index]);
  const Xdata = datanew.Xdata
  var color = {
    type: "linear",
    x: 0,
    x2: 1,
    y: 0,
    y2: 0,
    colorStops: [{
      offset: 0,
      color: '#049D3D',
    },
    {
      offset: 0.5,
      color: '#049D3D',
    },
    {
      offset: 0.5,
      color: '#00C64B',
    },
    {
      offset: 1,
      color: '#00C64B',
    },
    ],
  };
  var color1 = {
    type: "linear",
    x: 0,
    x2: 1,
    y: 0,
    y2: 0,
    colorStops: [{
      offset: 0,
      color: '#CC3000',
    },
    {
      offset: 0.5,
      color: '#CC3000',
    },
    {
      offset: 0.5,
      color: '#FF5B28',
    },
    {
      offset: 1,
      color: '#FF5B28',
    },
    ],
  };

  var color2 = {
    type: "linear",
    x: 0,
    x2: 1,
    y: 0,
    y2: 0,
    colorStops: [{
      offset: 0,
      color: '#004AB9',
    },
    {
      offset: 0.5,
      color: '#004AB9',
    },
    {
      offset: 0.5,
      color: '#008AFF',
    },
    {
      offset: 1,
      color: '#008AFF',
    },
    ],

  };


  // var color3 = {
  //     type: "linear",
  //     x: 0,
  //     x2: 1,
  //     y: 0,
  //     y2: 0,
  //     colorStops: [{
  //         offset: 0,
  //         color: 'rgba(255, 135, 133, 0.8)',
  //       },
  //       {
  //         offset: 0.5,
  //         color: 'rgba(255, 135, 133, 0.8)',
  //       },
  //       {
  //         offset: 0.5,
  //         color: 'rgba(255, 135, 133, .24)',
  //       },
  //       {
  //         offset: 1,
  //         color: 'rgba(255, 135, 133, 0.6)',
  //       },
  //     ],
  //   };

  var barWidth = barW ? barW : 16;
  var option = {
    tooltip: {
      trigger: 'axis',
      formatter: function (params) {
        var str = params[0].name + ":";
        params.filter(function (item) {
          if (item.componentSubType == "bar") {
            str += "<br/>" + item.seriesName + "：" + item.value;
          }
        });
        return str;
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      top: "15%",
      containLabel: true,
    },
    legend: {
      show: false,
      // top: '5%',
      // right: 70,
      // selectedMode: false,
      // icon: 'circle',
      // itemHeight: 10,
      // itemWidth: 10,
      // itemStyle: {
      //   borderWidth: 1,
      //   borderColor: '#fff',
      //   shadowColor: '#fff',
      //   shadowBlur: 10
      // },
      // textStyle: {
      //   fontSize: 12,
      //   color: '#fff',
      //   padding: [0, 8],
      // },
      // itemGap: 38,
    },
    xAxis: {
      data: Xdata,

      type: "category",
      boundaryGap: true,
      axisLine: {
        show: true,
        lineStyle: {
          color: "#D7DBEE",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        textStyle: {
          color: "#333333",
          fontSize: 14,
        },
      },
      axisLine: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      // name: "单位：MW",
      // nameTextStyle: {
      //   color: "#333333",
      //   fontSize: 14,
      // },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#D7DBEE",
        },
      },
      axisLabel: {
        textStyle: {
          color: "#333333",
          fontSize: 14,
        },
      },
      splitLine: {
        lineStyle: {
          color: "rgba(215, 219, 238, 0.6)",
        },
      },
    },
    series: [
      //树障
      {
        z: 1,
        name: data[0].name,
        type: "bar",
        stack: "考核量",
        barWidth: barWidth,
        symbolOffset: ["-8", "0"],
        symbolPosition: "start",
        barGap: "0%",
        data: data0,
        itemStyle: {
          normal: {
            color: color2
          },
        },
      },
      //底部
      {
        z: 2,
        name: data[0].name,
        type: "pictorialBar",
        stack: "考核量",
        data: sideData,
        symbol: "diamond",
        symbolOffset: ["-8", "50%"],
        symbolSize: [barWidth, 8],
        itemStyle: {
          normal: {
            color: '#008AFF'
          },
        },
        tooltip: {
          show: false,
        },
      },
      {
        z: 3,
        name: data[0].name,
        type: "pictorialBar",
        stack: "考核量",
        symbolPosition: "end",
        data: data0,
        symbol: "diamond",
        // 修改部分 0改为了-8
        symbolOffset: ["-8", "-60%"],
        symbolSize: [barWidth, (8 * (barWidth - 4)) / barWidth],
        itemStyle: {
          normal: {
            borderWidth: 2,
            color: '#008AFF'
          },
        },
        tooltip: {
          show: false,
        },
      },
      //缺陷
      {
        z: 3,
        name: data[1].name,
        stack: "考核量",
        type: "bar",
        barWidth: barWidth,
        
        symbolOffset: ["-8", "0"],
        symbolPosition: "start",
        barGap: "0%",
        data: data1,
        itemStyle: {
          normal: {
            color: color
          },
        },
      },
      //底部
      {
        z: 1,
        name: data[1].name,
        type: "pictorialBar",
        stack: "考核量",
        data: sideData,
        symbolPosition: "end",
        symbol: "diamond",
        symbolOffset: ["-8", "-60%"],
        symbolSize: [barWidth, 8],
        itemStyle: {
          normal: {
            color: 'rgba(0, 150, 255,1)'
          },
        },
        tooltip: {
          show: false,
        },
      },
      {
        z: 2,
        name: data[1].name,
        type: "pictorialBar",
        stack: "考核量",
        symbolPosition: "end",
        data: sideData1,
        symbol: "diamond",
        symbolOffset: ["-8", "-60%"],
        symbolSize: [barWidth, (8 * (barWidth - 4)) / barWidth],
        itemStyle: {
          normal: {
            borderWidth: 2,
            color: 'rgba(0, 150, 255,1)'
          },
        },
        tooltip: {
          show: false,
        },
      },
      {
        z: 3,
        name: data[2].name,
        stack: "考核量",
        type: "bar",
        barWidth: barWidth,
        barGap: "0%",
        
        symbolOffset: ["-8", "0"],
        symbolPosition: "start",
        data: data2,
        itemStyle: {
          normal: {
            color: color1
          },
        },
      },
      //底部
      {
        z: 4,
        name: data[2].name,
        type: "pictorialBar",
        stack: "考核量",
        data: sideData1,
        symbolPosition: "end",
        symbol: "diamond",
        symbolOffset: ["-8", "-60%"],
        symbolSize: [barWidth, 8],
        itemStyle: {
          normal: {
            color: 'rgba(255, 91, 40, 0.4)'
          },
        },
        tooltip: {
          show: false,
        },
      },
      {
        z: 5,
        name: data[2].name,
        type: "pictorialBar",
        stack: "考核量",
        data: sideData2,
        symbolPosition: "end",
        symbol: "diamond",
        symbolOffset: ["-8", "-60%"],
        symbolSize: [barWidth, 8],
        itemStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              x2: 0,
              y: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: '#FF3C00',
              },
              {
                offset: 1,
                color: '#FFA98E',
              },
              ],
            }
          },
        },
        tooltip: {
          show: false,
        },
      },

      //树障
      {
        z: 1,
        name: data[3].name,
        type: "bar",
        stack: "免考量",
        barWidth: barWidth,
        data: data3,
        
        symbolOffset: ["8", "0"],
        symbolPosition: "start",
        itemStyle: {
          normal: {
            color: color2
          },
        },
      },
      //底部
      {
        z: 2,
        name: data[3].name,
        type: "pictorialBar",
        stack: "免考量",
        data: sideData3,
        symbol: "diamond",
        symbolOffset: ["8", "50%"],
        symbolSize: [barWidth, 8],
        itemStyle: {
          normal: {
            color: '#008AFF'
          },
        },
        tooltip: {
          show: false,
        },
      },
      {
        z: 3,
        name: data[3].name,
        type: "pictorialBar",
        stack: "免考量",
        symbolPosition: "end",
        data: data3,
        symbol: "diamond",
        symbolOffset: ["8", "-60%"],
        symbolSize: [barWidth, (8 * (barWidth - 4)) / barWidth],
        itemStyle: {
          normal: {
            borderWidth: 2,
            color: '#008AFF'
          },
        },
        tooltip: {
          show: false,
        },
      },
      //缺陷
      {
        z: 3,
        name: data[4].name,
        stack: "免考量",
        type: "bar",
        barWidth: barWidth,
        symbolOffset: ["8", "0"],
        symbolPosition: "start",
        barGap: "0%",
        data: data4,
        itemStyle: {
          normal: {
            color: color
          },
        },
      },
      //底部
      {
        z: 1,
        name: data[4].name,
        type: "pictorialBar",
        stack: "免考量",
        data: sideData3,
        symbolPosition: "end",
        symbol: "diamond",
        symbolOffset: ["8", "-60%"],
        symbolSize: [barWidth, 8],
        itemStyle: {
          normal: {
            color: 'rgba(0, 150, 255,1)'
          },
        },
        tooltip: {
          show: false,
        },
      },
      {
        z: 2,
        name: data[4].name,
        type: "pictorialBar",
        stack: "免考量",
        symbolPosition: "end",
        data: sideData4,
        symbol: "diamond",
        symbolOffset: ["8", "-60%"],
        symbolSize: [barWidth, (8 * (barWidth - 4)) / barWidth],
        itemStyle: {
          normal: {
            borderWidth: 2,
            color: 'rgba(0, 150, 255,1)'
          },
        },
        tooltip: {
          show: false,
        },
      },
      {
        z: 3,
        name: data[5].name,
        stack: "免考量",
        type: "bar",
        barWidth: barWidth,
        symbolOffset: ["8", "0"],
        symbolPosition: "start",
        barGap: "0%",
        data: data5,
        itemStyle: {
          normal: {
            color: color1
          },
        },
      },
      //底部
      {
        z: 4,
        name: data[5].name,
        type: "pictorialBar",
        stack: "免考量",
        data: sideData4,
        symbolPosition: "end",
        symbol: "diamond",
        symbolOffset: ["8", "-60%"],
        symbolSize: [barWidth, 8],
        itemStyle: {
          normal: {
            color: 'rgba(255, 91, 40, 0.4)'
          },
        },
        tooltip: {
          show: false,
        },
      },
      {
        z: 5,
        name: data[5].name,
        type: "pictorialBar",
        stack: "免考量",
        data: sideData5,
        symbolPosition: "end",
        symbol: "diamond",
        symbolOffset: ["8", "-60%"],
        symbolSize: [barWidth, 8],
        itemStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              x2: 0,
              y: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: '#FF3C00',
              },
              {
                offset: 1,
                color: '#FFA98E',
              },
              ],
            }
          },
        },
        tooltip: {
          show: false,
        },
      },
    ],
  }
  serveTBar.setOption(option)
  window.addEventListener("resize", function () {
    serveTBar.resize();
  });
}

function barCharts2(id, datanew, Xdata, barW) {
  const chart = document.getElementById(id)
  chart.removeAttribute('_echarts_instance_')//解决切换页面echarts不显示的问题
  var serveTBar = echarts.init(chart);

  function processData(data) {
    const length = data.length;
    const result = [];

    if (length === 1) {
      result.push({ number: 0 });
    } else if (length === 2) {
      result.push({ number: -8 }, { number: 8 });
    } else {
      const step = 16;
      const start = -step * (length - 1) / 2;

      for (let i = 0; i < length; i++) {
        const number = start + i * step;
        result.push({ number });
      }
    }

    return result;
  }

  const processedData = processData(datanew);

  //蓝
  var color = {
    type: "linear",
    x: 1,
    x2: 0,
    y: 0,
    y2: 0,
    colorStops: [{
      offset: 0,
      color: '#32C7EC',
    },
    {
      offset: 0.5,
      color: '#32C7EC',
    },
    {
      offset: 0.5,
      color: '#1989C3',
    },
    {
      offset: 1,
      color: '#1989C3',
    },
    ],

  };


  var colorList = [color]

  var colorListB = ['#30C8ED']
  var barWidth = barW ? barW : 22;

  var seriesData = []
  datanew.forEach((el, index) => {
    seriesData.push( //树障
      {
        z: 1,
        name: el.name,
        type: "bar",
        barWidth: barWidth,

        barGap: "0%",
        data: el.data_a,
        symbolOffset: [processedData[index].number, "0"],
        symbolPosition: "start",
        itemStyle: {
          normal: {
            color: colorList[0]
          },
        },
      },
      {
        z: 3,
        name: el.name,
        type: "pictorialBar",
        stack: "产量",
        symbolPosition: "end",
        data: el.data_a,
        symbol: "diamond",
        symbolOffset: [processedData[index].number, "-60%"],
        symbolSize: [barWidth, (10 * (barWidth - 4)) / barWidth],
        itemStyle: {
          normal: {
            borderWidth: 2,
            color: colorListB[0]
          },
        },
        tooltip: {
          show: false,
        },
      },)
  })
  var option = {
    tooltip: {
      trigger: 'axis',
      formatter: function (params) {
        var str = params[0].name + ":";
        params.filter(function (item) {
          if (item.componentSubType == "bar") {
            str += "<br/>" + item.seriesName + "：" + item.value;
          }
        });
        return str;
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      top: "15%",
      containLabel: true,
    },
    legend: {
      show: false,
      // top: '5%',
      // right: 70,
      // selectedMode: false,
      // icon: 'circle',
      // itemHeight: 10,
      // itemWidth: 10,
      // itemStyle: {
      //   borderWidth: 1,
      //   borderColor: '#fff',
      //   shadowColor: '#fff',
      //   shadowBlur: 10
      // },
      // textStyle: {
      //   fontSize: 12,
      //   color: '#fff',
      //   padding: [0, 8],
      // },
      // itemGap: 38,
    },
    xAxis: {
      data: Xdata,
      type: "category",
      boundaryGap: true,
      axisLine: {
        show: true,
        lineStyle: {
          color: "#D7DBEE",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        textStyle: {
          color: "#333333",
          fontSize: 14,
        },
      },
      axisLine: {
        show: false,
      },
    },
    yAxis: {
      // name: '电量',
      // nameTextStyle: {
      //       color: '#A0C4E5',
      //       fontSize: 14,
      //       fontFamily: "Microsoft YaHei",
      //       fontWeight: 400
      //     },
      type: "value",
      // name: "单位：MW",
      // nameTextStyle: {
      //   color: "#333333",
      //   fontSize: 14,
      // },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#D7DBEE",
        },
      },
      axisLabel: {
        textStyle: {
          color: "#333333",
          fontSize: 14,
        },
      },
      splitLine: {
        lineStyle: {
          color: "rgba(215, 219, 238, 0.6)",
        },
      },
    },
    series: seriesData,
  }
  serveTBar.setOption(option)
  window.addEventListener("resize", function () {
    serveTBar.resize();
  });
}
